<template>
	<base-card
		:title="$t('bettingAnalysis.title')"
		contentPadding="px-[2px] pb-[2px]"
		:collapse="collapse">
		<base-loading-box class="h-[200px]" :isEmpty="isEmpty" :loading="loading" :error="error">
			<n-carousel autoplay draggable>
				<div v-if="eventData && handicapData">
					<betting-analysis-chart
						:type="BettingType.handicap"
						:eventData="eventData"
						:data="handicapData"
						:title="$t('BettingType.handicap')" />
				</div>
				<div v-if="eventData && ouData">
					<betting-analysis-chart
						:type="BettingType.ou"
						:eventData="eventData"
						:data="ouData"
						:title="$t('BettingType.ou')" />
				</div>
				<div v-if="eventData && moneylineData">
					<betting-analysis-chart
						:type="BettingType.moneyline"
						:eventData="eventData"
						:data="moneylineData"
						:title="$t('BettingType.moneyline')" />
				</div>
			</n-carousel>
		</base-loading-box>
	</base-card>
</template>

<script lang="ts" setup>
import { BaseCard, BaseLoadingBox } from '@/components/base'
import BettingAnalysisChart from './betting-analysis-chart.vue'
import { ref, computed, watch, PropType } from 'vue'
import { NCarousel } from 'naive-ui'
import { getBetAnalysis } from '@/api/betting'
import { BettingType } from '@/enums'
import { useRequest } from '@/hooks'
import { useAppStore } from '@/store'
import { Match } from '@/types'

const appStore = useAppStore()

const props = defineProps({
	eventId: {
		type: String
	},
	eventData: {
		type: Object as PropType<Match | undefined>
	}
})

const handicapData = computed(() => getMarketData(BettingType.handicap))

const ouData = computed(() => getMarketData(BettingType.ou))

const moneylineData = computed(() => getMarketData(BettingType.moneyline))

const getMarketData = (type: BettingType) => {
	if (analysisData.value) {
		const item: any = (analysisData.value as []).find(
			({ marketTypeCate }) => type === marketTypeCate
		)
		if (item && item.teams && item.teams.length) {
			return item.teams
				.map((item: any) => {
					let type = ''
					if (item.teamId === props.eventData?.homeTeamId) {
						type = 'home'
					} else if (item.teamId === props.eventData?.awayTeamId) {
						type = 'away'
					} else {
						type = 'draw'
					}
					return { ...item, type }
				})
				.sort((a: any, b: any) => {
					const aType = a.type
					const bType = b.type
					if (aType === 'home') {
						return -1
					} else if (aType === 'away') {
						return 1
					} else {
						if (bType === 'home') {
							return 1
						} else if (bType === 'away') {
							return -1
						}
					}
					return 0
				})
		}
	}
	return null
}

const params = computed(() => ({
	location: appStore.region,
	currency: appStore.currency,
	eventId: props.eventId
}))

const collapse = ref(false)

const isEmpty = ref(true)

const {
	run,
	data: analysisData,
	loading,
	error
} = useRequest(getBetAnalysis, {
	onSuccess: (data: any) => {
		isEmpty.value = !data.some((item: any) => item.teams.length)
		setTimeout(() => (collapse.value = isEmpty.value), 300)
	}
})

watch(
	() => params.value,
	() => {
		if (props.eventId) {
			run(params.value)
		}
	},
	{ immediate: true }
)
</script>
